সিএসএস(৩) আসার পূর্বে সিএসএসে শুধুমাত্র কালারের নাম, হেক্সাডেসিমাল এবং RGB ভ্যালুর কালার সাপোর্ট করত।
সিএসএস(৩) তে আরও কিছু কালার-ভ্যালু যোগ হয়েছে। যথাঃ
RGBA কালার ভ্যালু হচ্ছে alpha channel এর মাধ্যমে RGB কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।
rgba(red, green, blue, alpha)এখানে প্রথম তিনটি মান হলো RGB ভ্যালু অর্থাৎ red, green এবং blue। আর চতুর্থ মানটি হলো আলফা মান যা কালারের অপাসিটি নির্দেশ করে। আলফা প্যারামিটারটির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ)।
নিম্নে RGBA কালার এর ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস RGBA কালার-ভ্যালুর উদাহরণ</title>
<style>
#div1 {background-color:rgba(255,0,0,0.3);}
#div2 {background-color:rgba(0,255,0,0.5);}
#div3 {background-color:rgba(0,0,255,0.8);}
</style>
</head>
<body>
<p>RGBA color এর ব্যবহার:</p>
<div id="div1"><code>background-color:rgba(255,0,0,0.3);</code></div>
<div id="div2"><code>background-color:rgba(0,255,0,0.5);</code></div>
<div id="div3"><code>background-color:rgba(0,0,255,0.8);</code></div>
</body>
</html>HSL কালার-ভ্যালুর সিনটেক্স:
hsl(hue, saturation, lightness)HSL কালার তিনটি অংশে বিভিক্ত। যথাঃ Hue, Saturation এবং Lightness।
প্রথম অংশ Hue। যা কালেরর মান নির্ধারণ করে। এটি ডিগ্রী এককে ভ্যালু গ্রহণ করে। যেখানে ০(শূন্য) হলো সর্বনিম্ন ডিগ্রী এবং ৩৬০ সর্বোচ্চ ডিগ্রী। এখানে ০ এবং ৩৬০ ডিগ্রী হচ্ছে লাল কালার। ১২০ ডিগ্রী হচ্ছে সবুজ কালার আর ২৪০ ডিগ্রী হচ্ছে নীল কালার।
দ্বিতীয় অংশ Saturation যা কালারের পূর্ণতা প্রদান করে। এটি শতকরা এককে ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান।
তৃতীয় অংশ Lightness যা কালারের উজ্জ্বলতা নির্দেশ করে। এটি শতকরা এককে মান/ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান। সুতরাং এখানে ০% হচ্ছে কালো এবং ১০০% হচ্ছে সাদা বা উজ্জ্বল।
নিম্নে HSL কালার এর ব্যবহার দেখানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস HSL কালার-ভ্যালুর উদাহরণ</title>
<style>
#div1 {background-color:hsl(150,100%,60%);}
#div2 {background-color:hsl(10,110%,85%);}
#div3 {background-color:hsl(190,90%,50%);}
</style>
</head>
<body>
<p>HSL color এর ব্যবহার:</p>
<div id="div1"><code>background-color:hsl(150,100%,60%);</code></div>
<div id="div2"><code>background-color:hsl(10,110%,85%);</code></div>
<div id="div3"><code>background-color:hsl(190,90%,50%);</code></div>
</body>
</html>HSLA কালার-ভ্যালু হচ্ছে alpha channel এর মাধ্যমে HSL কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।
hsla(hue, saturation, lightness, alpha)
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস HSLA color এর উদাহরণ</title>
<style>
#div1 {background-color:hsla(130,60%,50%,0.5);}
#div2 {background-color:hsla(60,120%,80%,0.5);}
#div3 {background-color:hsla(280,150%,80%,0.5);}
</style>
</head>
<body>
<p>HSLA color এর ব্যবহার:</p>
<div id="div1"><code>background-color:hsla(150,100%,60%,0.5);</code></div>
<div id="div2"><code>background-color:hsla(10,110%,85%,0.5);</code></div>
<div id="div3"><code>background-color:hsla(190,90%,50%,0.5);</code></div>
</body>
</html>
সিএসএস(৩) opacity প্রোপার্টির মাধ্যমে একটি এলিমেন্টকে স্বচ্ছ/অস্বচ্ছ করা যায়।
opacity(অস্বচ্ছতা) প্রোপার্টির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ) এর মধ্যে হতে হবে।
নিম্নে Opacity প্রোপার্টির ব্যবহার দেখানো হলোঃ
উপরের কালারগুলো লক্ষ্য করলে দেখবেন যে, কালারের সাথে লেখাগুলোও অস্পষ্ট হয়ে গেছে। অর্থাৎ আমরা opacity ব্যবহার করে কালারের সাথে লেখাও অস্বচ্ছ বা ট্রান্সপারেন্ট করতে পারি।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস Opacity এর উদাহরণ</title>
<style>
#div1 {background-color:rgb(255,0,0);opacity:0.7;}
#div2 {background-color:rgb(0,255,0);opacity:0.7;}
#div3 {background-color:rgb(0,0,255);opacity:0.7;}
</style>
</head>
<body>
<div>RGB কালার এর সাথে opacity এর ব্যবহার।</div>
<div id="div1"><code>background-color:rgb(255,0,0);opacity:0.7;</code></div>
<div id="div2"><code>background-color:rgb(0,255,0);opacity:0.7;</code></div>
<div id="div3"><code>background-color:rgb(0,0,255);opacity:0.7;</code></div>
</body>
</html>
Read more
or
